<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>教育考试平台_在线考试</title>
    <link href="/css/examMain.css" rel="stylesheet" type="text/css"/>
    <link href="/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/css/test.css" rel="stylesheet" type="text/css"/>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        #update {
            cursor: pointer;
        }
        .addbutton {
            cursor: pointer;
            width: 264px;
            border: 0;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            background: #389fc3;
            color: #fff;
            border-radius: 30px;
            display: block;
            float: left;
            margin-top: 5px;
        }

    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_title">
                        <p class="test_time">

                        </p>
                        <font><input type="button" onclick="addPaper()" name="test_jiaojuan" value="添加试题"></font>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>修改试卷信息</h2>
                            <p>
                                <span>共</span><i class="content_lit">${total}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${totalValue}</i><span>分</span>
                            </p>
                        </div>
                    </div>

                    <div class="test_content_nr" id="update_div" style="display: none;">
                        <input type="hidden" id="add_category_id" value="${category.uuid}">
                        <ul>
                            <li>
                                <div class="test_content_nr_tt">
                                    <span>标题：</span>
                                    <input id="add_new_title" type="text" style="width: 86%; height: 20px;">
                                    <span style="cursor: pointer;" class="addButton" onclick="submitPaper()">添加</span>
                                </div>
                                <div class="test_content_nr_main">
                                    <ul>
                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="add_answer_option_1"
                                                   value="A" class="radioOrCheck" name="add_answer"/>
                                            <label for="answer_option_1">
                                                <span>A.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="add_answer_A" type="text"
                                                           style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                           value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="add_answer_option_2"
                                                   value="B" class="radioOrCheck" name="add_answer"/>
                                            <label for="answer_option_2">
                                                <span>B.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="add_answer_B" type="text"
                                                           style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                           value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="add_answer_option_3"
                                                   value="C" class="radioOrCheck" name="add_answer"/>
                                            <label for="answer_option_3">
                                                <span>C.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="add_answer_C" type="text"
                                                           style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                           value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="add_answer_option_4"
                                                   value="D" class="radioOrCheck" name="add_answer"/>
                                            <label for="answer_option_4">
                                                <span>D.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="add_answer_D" type="text"
                                                           style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                           value="">
                                                </p>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>


                    <div class="test_content_nr">
                        <ul id="paper_ui_id">
                            <c:forEach items="${list}" var="paper" varStatus="stauts">
                                <li id="${paper.id}">
                                    <div class="test_content_nr_tt">
                                        <i>${stauts.count}</i><span>(${scopeValue}分)</span>${paper.title}
                                        <span id="deleteById" style="color: red; cursor: pointer;">删除</span>
                                        <b class="icon iconfont" id="update">更新</b>
                                        <input type="hidden" id="paperId" value="${paper.id}">
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <div id="paper_show_${paper.id}">

                                                <c:if test="${paper.trueAnswer eq 'A'}">

                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_1" value="A"
                                                               class="radioOrCheck" checked="checked"
                                                               name="answer_${paper.id}"/>

                                                        <label for="answer_${paper.id}_option_1">
                                                            A
                                                            <p class="ue" style="display: inline;">.${paper.a}</p>
                                                        </label>
                                                    </li>

                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_2" value="B"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_2">
                                                            B
                                                            <p class="ue" style="display: inline;">.${paper.b}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_3" value="C"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_3">
                                                            C
                                                            <p class="ue" style="display: inline;">.${paper.c}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_4" value="D"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_4">
                                                            D
                                                            <p class="ue" style="display: inline;">.${paper.d}</p>
                                                        </label>
                                                    </li>
                                                </c:if>


                                                <c:if test="${paper.trueAnswer eq 'B'}">
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_1" value="A"
                                                               class="radioOrCheck" name="answer_${paper.id}"/>

                                                        <label for="answer_${paper.id}_option_1">
                                                            A
                                                            <p class="ue" style="display: inline;">.${paper.a}</p>
                                                        </label>
                                                    </li>

                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_2" value="B"
                                                               class="radioOrCheck" checked="checked"
                                                               name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_2">
                                                            B
                                                            <p class="ue" style="display: inline;">.${paper.b}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_3" value="C"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_3">
                                                            C
                                                            <p class="ue" style="display: inline;">.${paper.c}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_4" value="D"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_4">
                                                            D
                                                            <p class="ue" style="display: inline;">.${paper.d}</p>
                                                        </label>
                                                    </li>
                                                </c:if>

                                                <c:if test="${paper.trueAnswer eq 'C'}">
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_1" value="A"
                                                               class="radioOrCheck" name="answer_${paper.id}"/>

                                                        <label for="answer_${paper.id}_option_1">
                                                            A
                                                            <p class="ue" style="display: inline;">.${paper.a}</p>
                                                        </label>
                                                    </li>

                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_2" value="B"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_2">
                                                            B
                                                            <p class="ue" style="display: inline;">.${paper.b}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_3" value="C"
                                                               class="radioOrCheck" checked="checked"
                                                               name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_3">
                                                            C
                                                            <p class="ue" style="display: inline;">.${paper.c}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_4" value="D"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_4">
                                                            D
                                                            <p class="ue" style="display: inline;">.${paper.d}</p>
                                                        </label>
                                                    </li>
                                                </c:if>

                                                <c:if test="${paper.trueAnswer eq 'D'}">
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_1" value="A"
                                                               class="radioOrCheck" name="answer_${paper.id}"/>

                                                        <label for="answer_${paper.id}_option_1">
                                                            A
                                                            <p class="ue" style="display: inline;">.${paper.a}</p>
                                                        </label>
                                                    </li>

                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_2" value="B"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_2">
                                                            B
                                                            <p class="ue" style="display: inline;">.${paper.b}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_3" value="C"
                                                               class="radioOrCheck" name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_3">
                                                            C
                                                            <p class="ue" style="display: inline;">.${paper.c}</p>
                                                        </label>
                                                    </li>
                                                    <li class="option">
                                                        <input type="radio" id="answer_${paper.id}_option_4" value="D"
                                                               class="radioOrCheck" checked="checked"
                                                               name="answer_${paper.id}"
                                                        />
                                                        <label for="answer_${paper.id}_option_4">
                                                            D
                                                            <p class="ue" style="display: inline;">.${paper.d}</p>
                                                        </label>
                                                    </li>
                                                </c:if>
                                            </div>

                                            <div style="display: none;" id="update_paper_${paper.id}">

                                                <li class="option">

                                                    <label for="answer_option_1">
                                                        <span>标题:</span>
                                                        <p class="ue" style="display: inline;">
                                                            <input id="update_title_${paper.id}" type="text"
                                                                   style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                                   value="${paper.title}">
                                                        </p>
                                                    </label>
                                                </li>

                                                <li class="option">
                                                    <input type="radio" style="margin: 6px 10px 0 0;"
                                                           id="answer_option_1" value="A" class="radioOrCheck"
                                                           name="update_answer_${paper.id}"/>
                                                    <label for="answer_option_1">
                                                        <span>A.</span>
                                                        <p class="ue" style="display: inline;">
                                                            <input id="update_question_${paper.id}_a" type="text"
                                                                   style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                                   value="${paper.a}">
                                                        </p>
                                                    </label>
                                                </li>

                                                <li class="option">
                                                    <input type="radio" style="margin: 6px 10px 0 0;"
                                                           id="answer_option_2" value="B" class="radioOrCheck"
                                                           name="update_answer_${paper.id}"/>
                                                    <label for="answer_option_2">
                                                        <span>B.</span>
                                                        <p class="ue" style="display: inline;">
                                                            <input id="update_question_${paper.id}_b" type="text"
                                                                   style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                                   value="${paper.b}">
                                                        </p>
                                                    </label>
                                                </li>

                                                <li class="option">
                                                    <input type="radio" style="margin: 6px 10px 0 0;"
                                                           id="answer_option_3" value="C" class="radioOrCheck"
                                                           name="update_answer_${paper.id}"/>
                                                    <label for="answer_option_3">
                                                        <span>C.</span>
                                                        <p class="ue" style="display: inline;">
                                                            <input id="update_question_${paper.id}_c" type="text"
                                                                   style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                                   value="${paper.c}">
                                                        </p>
                                                    </label>
                                                </li>

                                                <li class="option">
                                                    <input type="radio" style="margin: 6px 10px 0 0;"
                                                           id="answer_option_4" value="D" class="radioOrCheck"
                                                           name="update_answer_${paper.id}"/>
                                                    <label for="answer_option_4">
                                                        <span>D.</span>
                                                        <p class="ue" style="display: inline;">
                                                            <input id="update_question_${paper.id}_d" type="text"
                                                                   style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;"
                                                                   value="${paper.d}">
                                                        </p>
                                                    </label>
                                                </li>
                                                <input type="hidden" id="updateId" value="${paper.id}">
                                                <button id="submitUpdate">提交</button>
                                            </div>
                                        </ul>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </form>
            </div>

        </div>

        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <input type="hidden" id="updateCategoryId" value="${category.id}">
                    <div class="rt_nr1_title">
                        <h1>
                            时间设置：
                        </h1>
                        <p class="test_time">
                            <select id="updateTime" name="updateTime" style="height: 38px;width: 122px;">
                                <c:forEach items="${times}" var="time">
                                    <%--<c:if test="${time.code eq category.time}">--%>
                                    <%--<option selected="selected" value="${time.code}">${time.value}</option>--%>
                                    <%--</c:if>--%>
                                    <option value="${time.code}">${time.value}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>


                    <div class="rt_nr1_title" style="margin-top: 5px;">
                        <h1>
                            分数设置：
                        </h1>
                        <p class="test_time">
                            <select id="updateScope" name="scope" style="height: 38px;width: 122px;">
                                <c:forEach items="${scopes}" var="scope">
                                    <%--<c:if test="${scope.scopeCode eq category.scope}">--%>
                                    <%--<option selected="selected" value="${scope.scopeCode}">${scope.scopeValue}</option>--%>
                                    <%--</c:if>--%>
                                    <option value="${scope.scopeCode}">${scope.scopeValue}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>


                    <div class="rt_nr1_title" style="margin-top: 5px;">
                        <h1>
                            专业设置：
                        </h1>
                        <p class="test_time">
                            <select id="updateMajor" name="major" style="height: 38px;width: 122px;">
                                <c:forEach items="${majors}" var="major">
                                    <%--<c:if test="${major.majorCode eq category.clazz}">--%>
                                    <%--<option selected="selected" value="${major.majorCode}">${major.majorName}</option>--%>
                                    <%--</c:if>--%>
                                    <option value="${major.majorCode}">${major.majorName}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>

                    <div class="rt_nr1_title" style="margin-top: 5px;">
                        <h1>
                            出题人：
                        </h1>
                        <p class="test_time">

                            <input type="text" value="${category.author}" id="updateAuthor" name="author"
                                   style="height: 38px;width: 122px;"/>

                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">

                            <button onclick="updateCategory()" class="addbutton">修改</button>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="/js/jquery.countdown.js"></script>
<script>

    $(document).ready(function () {

        $("#paper_ui_id").on('click', '#update', function () {
            var paperId = $(this).nextAll("#paperId").val();

            var updatePaperId = 'update_paper_' + paperId;

            var paperShow = 'paper_show_' + paperId;

            $("#" + updatePaperId).css('display', 'block');
            $("#" + paperShow).css('display', 'none');
        });

        $("#paper_ui_id").on('click', '#submitUpdate', function () {
            var updateId = $(this).prevAll("#updateId").val();
            var title = 'update_title_' + updateId;
            var updateA = 'update_question_' + updateId + '_a';
            var updateTitle = $("#" + title).val();

            // alert(updateTitle);
            var a = $("#" + updateA).val();
            // alert(a)
            var updateB = 'update_question_' + updateId + '_b';
            var b = $("#" + updateB).val();
            var updateC = 'update_question_' + updateId + '_c';
            var c = $("#" + updateC).val();
            var updateD = 'update_question_' + updateId + '_d';
            var d = $("#" + updateD).val();
            var updateAnswer = 'update_answer_' + updateId;
            var trueAnswer = $('input[name="' + updateAnswer + '"]:checked').val();
            $.ajax({
                url: '/paper/updatePaper',
                dataType: 'JSON',
                type: 'POST',
                data: {
                    id: updateId,
                    title: updateTitle,
                    a: a,
                    b: b,
                    c: c,
                    d: d,
                    trueAnswer: trueAnswer
                },
                success: function (result) {
                    if (result.code == 200) {
                        window.location.reload();
                    } else {
                        alert(result.msg);
                        return false;
                    }
                }
            })

        })


        $("#paper_ui_id").on('click', '#deleteById', function () {
            var deleteId = $(this).nextAll("#paperId").val();
            if (!confirm("确认删除吗？")){
                return;
            }
            $.ajax({
                url:'/paper/deleteById?deleteId='+deleteId,
                success:function (result) {
                    if (result.code == 200) {
                        window.location.reload();
                    } else {
                        alert(result.msg);
                        return false;
                    }
                }
            })

        })

    });

    // 调出添加界面
    function addPaper() {
        $("#update_div").css('display', 'block');
    }

    // 添加试题
    function submitPaper() {
        var title = $("#add_new_title").val();
        // alert(title);

        var a = $("#add_answer_A").val();
        // alert(a);

        var b = $("#add_answer_B").val();
        // alert(b);

        var c = $("#add_answer_C").val();
        // alert(c);

        var d = $("#add_answer_D").val();
        // alert(d);

        var trueAnswer = $('input[name="add_answer"]:checked').val();
        // alert(trueAnswer)

        var categoryId = $("#add_category_id").val();
        // alert(categoryId)

        $.ajax({
            url: '/paper/addPaper',
            dataType: 'JSON',
            type: 'POST',
            data: {
                title: title,
                a: a,
                b: b,
                c: c,
                d: d,
                categoryId: categoryId,
                trueAnswer: trueAnswer
            },
            success: function (result) {
                if (result.code == 200) {
                    window.location.reload();
                } else {
                    alert(result.msg);
                    return false;
                }
            }
        })
    }
    // 更新分类
    function updateCategory() {

        var categoryId = $("#updateCategoryId").val();
        // alert(categoryId);

        var time = $("#updateTime").val();
        // alert(time);

        var scope = $("#updateScope").val();
        // alert(scope);

        var major = $("#updateMajor").val();
        // alert(major);

        var author = $("#updateAuthor").val();
        // alert(author);

        $.ajax({
            url:'/category/updateCategory',
            dataType:'JSON',
            type:'POST',
            data:{
                id:categoryId,
                clazz:major,
                time:time,
                scope:scope,
                author:author
            },
            success:function (result) {
                if (result.code == 200) {
                    window.location.reload();
                } else {
                    alert(result.msg);
                    return false;
                }
            }
        })


    }

</script>


</body>

</html>